<!--
 * @Author: your name
 * @Date: 2021-09-01 16:03:12
 * @LastEditTime: 2021-12-03 13:34:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\iconPage.vue
-->
<template>
    <div class="Iconpage">
        <div v-if="loading" class="loading">
            <Spin size="large" tip="正在加载图标"></Spin>
        </div>
        <div class="Iconpage_search">
            <div>
                <span>{{ $t("button.icontitle") }}</span>
                <span><Input
                    v-model:value="text"
                    size="small"
                    :placeholder="$t('button.iconplacehold')"
                /></span>
            </div>
            <div>
                <Button
                    size="small"
                    type="primary"
                    ghost
                    class="btn"
                    @click="searchbtn"
                >
                    <svg-icon icon-class="search" size="1"></svg-icon>
                    <span>{{ $t("button.iconSearch") }}</span>
                </Button>
            </div>
            <div>
                <Button
                    size="small"
                    type="primary"
                    ghost
                    class="btn"
                    :loading="!iconload"
                    @click="reloadIcon"
                >
                    <svg-icon v-if="iconload" icon-class="time-range" size="1"></svg-icon>
                    <span>{{ $t("button.iconReload") }}</span>
                </Button>
            </div>
        </div>
        <div
            v-if="!loading"
            :class="[getAutoLayout ? 'minborder' : '', 'Iconpage_iconlist']"
        >
            <div v-if="isEmpty" class="empty">
                <Empty>
                    <template #description>暂无图标</template>
                </Empty>
            </div>
            <Row v-for="(item1, index1) in iconArrs" :key="index1" type="flex">
                <Col
                    v-for="(item2, index2) in item1"
                    :key="index2"
                    :xs="{ span: 6 }"
                    :md="{ span: 6 }"
                    :lg="{ span: 3 }"
                >
                    <div
                        :class="['Iconpage_iconlist_item', iconload ? '' : 'colstyle']"
                        :style="{
                            borderRight: index2 == item1.length - 1 ? '1px solid #ccc' : '',
                        }"
                    >
                        <div :class="['iconbar', iconload ? '' : 'svgstyle']">
                            <svg-icon
                                :icon-class="item2.name"
                                color="#666"
                                size="1.5"
                            ></svg-icon>
                            <span>{{ item2.name }}</span>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick, computed, unref } from 'vue'
import { filterSvg } from '../../../ntils/helper'
import { IconArr } from '../../../router/type'
import { Empty } from 'ant-design-vue'
import { useMassage } from '../../../ntils/hooks'
import i18n from '../../../setting/locales/setlocales'
import { autoWindow } from '../../../setting/menuTrigger'
import { Row,Col,Button,Input,Spin } from 'ant-design-vue'
// import { autoWindow  } from '../setting/menuTrigger';
const { t } = i18n.global
const col = 8
let time = null
export default defineComponent({
    name: 'IconPage',
    components: { Empty,Row,Col,Button,Input,Spin },
    setup() {
        let iconReault = filterSvg()
        let len = iconReault.length - 1
        let num = Math.round(len / col)
        let iconArrs = ref<Array<Array<IconArr>>>([])
        let iconload = ref(false)
        let loading = ref(true)
        let text = ref('')
        let isEmpty = ref(false)
        let { createMessage } = useMassage()
        let { autoValue } = autoWindow()
        const getAutoLayout = computed(() => unref(autoValue.value))
        const arrslice = (iconReault) => {
            if (iconReault.length < 1) {
                createMessage.warn(`${t('Modal.iconwarn')}`)
                isEmpty.value = true
                return false
            }
            isEmpty.value = false
            for (let n = 1; n < num + 1; n++) {
                let newArr = iconReault.slice((n - 1) * col, n * col)
                iconArrs.value.push(newArr)
            }
        }
        const addstyle = () => {
            let dome = [...document.querySelectorAll('.Iconpage_iconlist_item')]
            let iconbar = [...document.querySelectorAll('.iconbar')]
            dome.forEach((item, index) => {
                item.style['transition-delay'] = index * 0.01 + 's'
                iconbar[index].style['transition-delay'] = index * 0.03 + 's'
            })
        }
        // 搜索图标
        const searchbtn = () => {
            if (text.value.length < 1) {
                createMessage.error(`${t('Modal.iconerror')}`)
                return false
            }
            iconArrs.value = []
            iconload.value = false
            let arr = iconReault.filter((item) => item.name.includes(text.value))
            arrslice(arr)
            readIcon()
        }
        // 开始渲染icon
        const readIcon = () => {
            setTimeout(() => {
                iconload.value = true
            }, 1000)
        }
        // 重置
        const reloadIcon = () => {
            text.value = ''
            time && clearTimeout(time)
            time = setTimeout(() => {
                iconArrs.value = []
                iconload.value = false
                arrslice(iconReault)
                readIcon()
            }, 200)
        }
        arrslice(iconReault)
        // 配置动画
        nextTick(() => {
            addstyle()
        })
        setTimeout(() => {
            loading.value = false
        }, 800)
        readIcon()
        return {
            iconArrs,
            iconload,
            loading,
            reloadIcon,
            text,
            searchbtn,
            isEmpty,
            getAutoLayout,
        }
    },
})
</script>

<style lang="less" scoped>
html[data-theme="dark"]{
.Iconpage {
      background: rgb(44, 42, 42);
   }
}
.Iconpage {
  position: relative;
  background: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 90vh;
  .loading {
    width: 100%;
    height: 80vh;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .empty {
    margin-top: 20px;
  }
  &_search {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    & > div {
      margin-right: 10px;
    }
    & > div:nth-of-type(1) {
      width: 300px;
      overflow: hidden;
      margin-right: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;

      & > span {
        display: inline-block;
        input {
          font-size: 12px;
          padding: 2px 3px;
        }
        &:nth-of-type(2) {
          flex: 1;
          margin-left: 10px;
        }
      }
    }
    .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        font-size: 13px;
        margin-left: 5px;
      }
    }
  }
  .minborder {
    border-right: 1px solid #ccc;
  }
  &_iconlist {
    border-top: 1px solid #ccc;

    .colstyle {
      opacity: 0;
    }

    .svgstyle {
      opacity: 0;
      transform: scale(0.3);
    }

    &_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      height: 130px;
      transition: all 0.5s ease-in 0s;

      .iconbar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;
        opacity: 1;
        & > span {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
